<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>F2 与 iconfont</title>
  <link rel="stylesheet" href="./assets/common.css">
  <link rel="stylesheet" href="./assets/fonts/iconfont.css">
  <style>
    canvas#mountNode {
      margin: 0 auto;
      display: block;
    }
  </style>
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
  <button id="changeData">更新数据</button>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
    const data = [
      { amount: 2, ratio: 0.01, memo: '学习', namekey: 'namekey' },
      { amount: 2, ratio: 0.01, memo: '睡觉', namekey: 'namekey' },
      { amount: 2, ratio: 0.01, memo: '吃饭', namekey: 'namekey' },
      { amount: 2, ratio: 0.01, memo: '讲礼貌', namekey: 'namekey' },
      { amount: 2, ratio: 0.01, memo: '其他', namekey: 'namekey' },
      { amount: 2, ratio: 0.01, memo: '运动', namekey: 'namekey' },
      { amount: 188, ratio: 0.94, memo: '暂无备注', namekey: 'namekey' }
    ];
    const chart = new F2.Chart({
      id: 'mountNode',
      width: 375,
      height: 260,
      animate: false,
      pixelRatio: window.devicePixelRatio
    });

    chart.source(data);
    chart.coord('polar', {
      transposed: true,
      innerRadius: 0.4,
      radius: 0.8
    });
    chart.axis(false);
    chart.legend(false);
    chart.tooltip(false);
    chart.pieLabel({
      triggerOn: 'click',
      onClick(ev) {
        console.log(ev.data);
      },
      lineHeight: 32,
      // skipOverlapLabels: true,
      sidePadding: 30,
      adjustOffset: 20,
      label1(data, color) {
        return {
          text: data.memo,
          textBaseline: 'bottom',
          fill: color
        };
      },
      label2(data) {
        return {
          text: data.amount,
          fill: '#999',
          fontWeight: 'bold'
        };
      }
    });
    chart.interval().position('namekey*ratio')
      .color('memo', [
        '#1890FF',
        '#13C2C2',
        '#2FC25B',
        '#FACC14',
        '#F04864',
        '#8543E0',
        '#3436C7',
        '#223273'])
      .adjust('stack');
    chart.render();

    // ================= 改变数据 ========================
      function randomData(data) {
        data.map(obj => {
          obj.ratio = Math.random();
          return obj;
        });
        return data;
      }

      $('#changeData').on('click', () => {
        const newData = randomData(data);
        chart.changeData(newData);
      });
</script>
</body>
</html>
